<template>
	<view class="w94">
		<scroll-view scroll-y style="height: 85vh;">
			<view class="item" v-for="(item, index) in siteList" :key="item.id">
				<view class="top">
					<view class="name">{{ item.contacts }}</view>
					<view class="phone">{{ item.phone }}</view>
					<view class="tag" v-if="item.isDef">
						<text class="red">默认</text>
					</view>
				</view>
				<u-radio-group v-model="addressId" iconPlacement="right">
					<view class="bottom ">
						<view class=" self-center" :class="{
							'hidden-text':isSelect != 1}" style="width: 500rpx;">{{item.province+' '+item.address}}</view>
						<template v-if="isSelect == 1">
							<view>
								<u-radio activeColor="red" :key="item.id" :name="item.id" @change="radioChange(item)"></u-radio>
							</view>
						</template>
						<template v-else>
							<view class="flex">
								<u-icon class="mr10" name="edit-pen" :size="20" color="#999999"
									@click="route(`/pages/users/user_address/index?isEdit=1&editData=${JSON.stringify(item)}`)"></u-icon>
								<u-icon class="ml5" name="trash" :size="20" color="#999999" @click="del(item,index)"></u-icon>
							</view>
						</template>
					</view>
				</u-radio-group>
			</view>
		</scroll-view>

		<template v-if="isSelect== 1">
			<view class="addSite" @tap="selectConfirm">
				<u-button shape="circle" type="primary" text="确定"></u-button>
			</view>
		</template>
		<template v-else>
			<view class="addSite" @tap="toAddSite">
				<u-button shape="circle" type="primary" text="添加地址"></u-button>
			</view>

		</template>
	</view>
</template>

<script lang="ts" setup>
	import API from "@/api/index.js"
	import { ref, reactive, computed } from "vue"
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { route } from "@/uni_modules/uview-plus";
	let siteList = reactive([])
	const isSelect = ref(0);
	const addressId = ref(null)


	onLoad((options) => {
		const { select } = options
		if (select) {
			isSelect.value = select
			uni.setNavigationBarTitle({
				title: '选择地址'
			})
		}
		// getData();
	})
	onShow(()=>{
		getData();
	})
	const getData = async () => {
		try {
			// loadingState.value = 'loading'
			let res = await API.userAddressList(uni.getStorageSync("userInfo").id)
			console.log("getData res", res.data);
			Object.assign(siteList, res.data)
			// addressId.value = siteList.find(item => item.isDef == true).id
			// pageTotal.value = res.data.total
			// loadingState.value = siteList.length >= pageTotal.value ? 'nomore' : 'loadmore'
		} catch (e) {
			// loadingState.value = 'error'
		}
	}

	const toAddSite = () => {
		uni.navigateTo({
			url: '/pages/users/user_address/index'
		});
	}
	 let currentInfo=reactive({
		 id:''
	 })
	const radioChange=(e)=>{
		currentInfo = e
		// console.log("radioChange",e);
	}
	//  地址 -> 详情
	const selectConfirm = () => {
		// uni.$emit('selectAddress', {
		// 	id: 3,
		// 	name: '王YY',
		// 	phone: '153****5555',
		// 	isDefault: false,
		// 	address: '广东省深圳市宝安区 平安路13号'
		// })
		if(currentInfo.id == ''){
			uni.showToast({
				title:'请先选择地址！',
				icon:'none'
			})
			return
		}
		uni.$emit('selectAddress', currentInfo)
		uni.navigateBack()
	}

	// del
	const del = (item,index) => {
		console.log("del", item, index);
		uni.showModal({
			title: '温馨提示',
			content: '是否确认删除该地址？',
			success(res) {
				if (res.confirm) {
					API.deleteUserAddress(item.id).then(res => {
						console.log("删除后状态", res);
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						siteList.splice(index, 1)
						getData()
					}).catch(err => {
						uni.showToast({
							title: "删除失败，请重新操作！",
							icon: "none"
						})
					})
				}
			}
		})
	}
</script>

<style>
	>>>.u-icon{
		margin-left: 15rpx !important;
	}
</style>
<style lang="scss" scoped>
	.item {
		padding: 34rpx 34rpx 24rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 24rpx;

		.top {
			display: flex;
			font-weight: bold;
			font-size: 30rpx;

			.phone {
				margin-left: 60rpx;
			}

			.tag {
				display: flex;
				font-weight: normal;
				align-items: center;

				text {
					display: block;
					width: 60rpx;
					height: 34rpx;
					line-height: 34rpx;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 30rpx;
					background-color: rgb(49, 145, 253);
				}

				.red {
					background-color: red
				}
			}
		}

		.bottom {
			display: flex;
			flex: 1;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;
		}
	}

	.addSite {
		margin-top: 40rpx;
		padding: 20px;
	}
</style>